<template>
  <section class="detail-box">
    <el-row class="detail-top-nav">缴费详情</el-row>
    <el-row class="detail-info">
      <div class="info-title">学生信息</div>
      <el-col :span="24" class="info-list">
        <div class="info-item">
          <span class="left">姓名</span>
          <span>{{detailInfo.name}}</span>
        </div>
        <div class="info-item">
          <span class="left">性别</span>
          <span>{{detailInfo.sex | sexFilter}}</span>
        </div>
        <div class="info-item">
          <span class="left">证件类型</span>
          <span>{{detailInfo.idType | idTypeFilter}}</span>
        </div>
        <div class="info-item">
          <span class="left">证件号码</span>
          <span>{{detailInfo.cardNo}}</span>
        </div>
        <div class="info-item">
          <span class="left">级别</span>
          <span>{{detailInfo.gradeYear}}级</span>
        </div>
        <div class="info-item">
          <span class="left">班级</span>
          <span>{{detailInfo.className}}</span>
        </div>
      </el-col>
    </el-row>
    <el-row class="detail-info">
      <div class="info-title">缴费项目</div>
      <el-col :span="24" class="info-list">
        <div class="info-item">
          <span class="left">{{detailInfo.schoolPaymentSkuName}}</span>
          <span>{{detailInfo.schoolPaymentSkuAmount | currency}}</span>
        </div>
      </el-col>
    </el-row>
    <el-row class="detail-info">
      <div class="info-title">支付信息</div>
      <el-col :span="24" class="info-list">
        <div class="info-item">
          <span class="left">支付类型</span>
          <span>{{ detailInfo.payMethods === 1 ? '全款支付' : '分笔支付'}}</span>
        </div>
        <template v-for="(item, index) in detailInfo.orderDetail">
          <div class="info-sub" :key="item.id" v-if="detailInfo.payMethods === 2">第<span>{{ index + 1 }}</span>笔</div>
          <div class="info-item" :key="item.id">
            <span class="left">支付时间</span>
            <span>{{item.payTime | timeFormat('yyyy-MM-dd hh:mm:ss')}}</span>
          </div>
          <div class="info-item" :key="item.id">
            <span class="left">缴费单号</span>
            <span>{{item.orderNo}}</span>
          </div>
        </template>
      </el-col>
    </el-row>
    <el-row class="detail-info" v-if="detailInfo.discountInfo && detailInfo.discountInfo.length">
      <div class="info-title">减免项</div>
      <el-col :span="24" class="info-list">
        <div class="info-item">
          <span class="left custom" style="color: #000">减免原因</span>
          <span class="" style="color: #000">减免金额</span>
        </div>
        <div class="info-item" v-for="(item, index) in detailInfo.discountInfo" :key="index">
          <span class="left custom">{{item.reason}}</span>
          <span>{{item.num | currency}}</span>
        </div>
      </el-col>
    </el-row>
  </section>
</template>
<script>
import { getDetailInfo } from 'api/school/payManage/index'
import common from 'src/util/common'
export default {
  data () {
    return {
      detailInfo: { // 详情信息
        SchoolStudent: {} // 学生信息
      }
    }
  },
  created () {
    getDetailInfo({
      id: Number(common.params('id'))
    }).then(res => {
      this.detailInfo = res.data
    })
  }
}
</script>
<style lang="less" scoped>
  .detail-box {
    padding: 20px 10px 0;
    .detail-top-nav {
      padding-bottom: 20px;
      border-bottom: 1px solid #ccc;
      margin-bottom: 20px;
    }
    .detail-info {
      border: 1px solid #ccc;
      border-radius: 8px;
      padding: 12px 10px 0;
      margin-bottom: 20px;
      .info-title {
        border-bottom: 1px solid #ccc;
        padding-bottom: 6px;
        padding-left: 10px;
      }
      .info-list {
        padding: 20px 0;
      }
      .info-item {
        padding-left: 10px;
        padding-bottom: 10px;
        color: #4f4f4f;
      }
      .info-sub {
        padding-left: 10px;
        color: #d1d1d1;
        font-size: 14px;
        span {
          display: inline-flex;
          width: 14px;
          height: 14px;
          border: 1px solid #ccc;
          justify-content: center;
          align-items: center;
          border-radius: 50%;
          box-sizing: border-box;
        }
      }
      .info-item:last-child {
        padding-bottom: 0;
      }
      .left {
        display: inline-block;
        width: 120px;
        text-align: left;
        color: gray;
      }
      .custom {
        width: 200px; 
      }
    }
  }
</style>
